<template>
  <div class="layout-padding">
    <!--    页面布局 -->
    <splitpanes horizontal>
      <pane size="50">
        <splitpanes>
          <pane size="30">
            <div class="layout-padding-auto layout-padding-view">
              <!--查询结果的列表-->
              <el-table :data="state.dataList" v-loading="state.loading" highlight-current-row
                        :cell-style="tableStyle.cellStyle" stripe :header-cell-style="tableStyle.headerCellStyle"
                        border style="width: 100%;height: 100%" @row-click="clickRow">
                <el-table-column prop="text" :label="$t('qms.testItem')"/>
                <el-table-column prop="value" :label="$t('qms.testItemCode')"/>
              </el-table>
            </div>
          </pane>
          <pane size="70">
            <div class="layout-padding-auto layout-padding-view">
              <relationH  ref="relationRef"  @click-h-row="clickHRow"></relationH>
            </div>
          </pane>

        </splitpanes>

      </pane>
      <pane size="50">
        <div class="layout-padding-auto layout-padding-view">
          <relationD  ref="relationDRef" ></relationD>
        </div>
      </pane>
    </splitpanes>
  </div>
</template>

<script setup lang="ts" name="systemQmsRelationH">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {fetchCheckList} from "/@/api/platform/qms/qmsRelationH";
import relationH from "/src/views/qms/qmsRelationH/relationH/relationH.vue";
import relationD from "/src/views/qms/qmsRelationH/relationD/relationD.vue";

const relationRef = ref()
const relationDRef = ref()

// 搜索变量

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {'code': 'QMSInspectionCategory'},
  pageList: fetchCheckList,
  // dataList: [{"text":"1","value":"TI"}],
  isPage: false
})
//  table hook
const {
  tableStyle,
  getDataList,
} = useTable(state)

// 点击行的时候触发
const clickRow = (row: any) => {
  relationRef.value.query(row)
  relationDRef.value.query(null)
}

const clickHRow = (row: any) => {
  relationDRef.value.query(row)
}
</script>